import { cloneDeep, isEqual } from "lodash";
import { useRef, useState, useEffect } from "react";

import ChartList from "~/components/Visualization/chartList";
import CustomParameters from "~/components/Visualization/customParameters";
import ParameterList from "~/components/Visualization/parameterList";
import { useAnalysisTask } from "~/components/Visualization/store/useTaskState";
import { useGetTask } from "~/hooks/Visualization/use-visualization-api";
import { RawWorkSpaceState } from "~/modules/worker/schedule";
import { useWorkSpace } from "~/modules/workspace/store/use-workspace";
import "./index.scss";
const Index = () => {
  const [isParamsList, setParamsList] = useState(true);
  let { workSpace, flights, update } = useWorkSpace();
  const { analysisTask, updateTask } = useAnalysisTask();
  const parameterListRef = useRef();
  const customParametersRef = useRef();
  let taskRes: any;
  if (analysisTask.type == "edit") {
    taskRes = useGetTask(analysisTask.id);
  }
  useEffect(() => {
    if (taskRes) {
      workSpace = taskRes.task.workspace;
      analysisTask.customParams = taskRes.task.calculated_params;
      updateTask(analysisTask);
    } else {
      workSpace = {
        name: analysisTask.name,
        splitType: "disassemble",
        setting: {
          profileChartParmas: "",
          chartsHeight: "100",
          setBgByStateQuantity: false,
          stateQuantityParams: "",
          backgroundColors: [],
        },
        splitCharts: [],
      };
      flights = analysisTask.flights;
    }
    RawWorkSpaceState.flights = cloneDeep(flights);
    RawWorkSpaceState.workSpace = cloneDeep(workSpace);
    update(workSpace, flights);
  }, [taskRes?.task.workspace]);

  // 参数列表的显示隐藏
  const onShowHide = (state: boolean) => {
    setParamsList(state);
  };

  // 添加自定义参数
  const [param, setParam] = useState<{ type: string; value?: any }>({
    type: "",
    value: "",
  });
  const onAddCustomParams = (type: string, value?: any) => {
    const data = {
      type,
      value,
    };
    setParam(data);
    customParametersRef.current &&
      (customParametersRef.current as any).onOpen();
  };

  return (
    <div
      className="flex ml-16px  mr-16px"
      style={{ height: "calc(100% - 80px)" }}
    >
      {isParamsList ? (
        <div className="w-20% mr-10px bg-#FFF">
          <ParameterList ref={parameterListRef} AddCustom={onAddCustomParams} />
        </div>
      ) : null}
      <div className={`${isParamsList ? "w-80%" : "w-100%"} bg-#FFF`}>
        <ChartList Open={onShowHide} />
      </div>
      <CustomParameters ref={customParametersRef} param={param} />
    </div>
  );
};

export default Index;
